<template>
	<view class="member-point" :class="isIphoneX ? 'padding-bottom' : ''">
		<view class="account-box ns-border-color">
			<view class="balance">{{ memberAccount.point }}</view>
			<view class="p-style">积分</view>
		</view>
		<view class="declaration-title ns-padding ns-border-color-gray">积分说明</view>
		<view class="declaration-content ns-text-color-gray">{{ pointConfig.desc }}</view>
		<view class="ns-table ns-padding" v-if="memberPointList.length > 0">
			<view v-for="(item, index) in memberPointList" :key="index" class="ns-table-wrap ns-border-color-gray">
				<view class="table-wrap-title">
					<text>{{ item.type_name }}</text>
					<text class="ns-text-color ns-font-size-lg pull-right">{{ Math.ceil(item.number) }}</text>
				</view>
				<view class="table-wrap-time ns-text-color-gray">{{ $util.timeStampTurnTime(item.create_time) }}</view>
				<view class="table-wrap-text ns-text-color-gray">{{ item.text }}</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" v-if="memberPointList.length > 0 && pageCount > 1" />
		<view v-if="isEmpty && memberPointList.length == 0" class="empty" style="padding-top:0">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view class="ns-text-color-gray">您暂时还没有积分记录哦！</view>
		</view>
		<ns-login ref="login" href="member_point"></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		uniLoadMore,
		nsLogin
	},
	data() {
		return {
			pageIndex: 1,
			pageCount: 0,
			memberAccount: {
				point: 0
			},
			pointConfig: [],
			memberPointList: [],
			status: 'loading',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多了'
			},
			isEmpty: false,
			ident: false, //防止初始化时，触发上拉加载
			isIphoneX: false //判断手机是否是iphoneX以上
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				if (res.model.search('iPhone X') != -1) {
					this.isIphoneX = true;
				}
			}
		});
	},
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;

		this.getPointConfig();
		this.getMemberAccount();
		this.getMemberPointList();
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getMemberPointList();
	},
	mixins: [http],
	methods: {
		getMemberAccount() {
			this.sendRequest({
				url: 'System.Member.memberAccount',
				success: res => {
					if (res.code == 0) {
						this.memberAccount = res.data;
					}
				}
			});
		},
		getPointConfig() {
			this.sendRequest({
				url: 'System.Promotion.pointConfig',
				success: res => {
					if (res.code == 0) {
						this.pointConfig = res.data;
					}
				}
			});
		},
		getMemberPointList() {
			if (this.status == 'nomore') return;
			this.sendRequest({
				url: 'System.Member.accountRecordsList',
				data: {
					page_index: this.pageIndex,
					account_type: 1
				},
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						var data = res.data;
						this.pageCount = res.data.page_count;
						if (this.pageCount == 0) {
							this.status = 'nomore';
							this.isEmpty = true;
							this.contentText.contentnomore = '';
						} else {
							if (this.pageIndex < this.pageCount) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
								this.contentText.contentnomore = '没有更多了';
							}
							this.isEmpty = false;

							if (data.data.length > 0) {
								this.memberPointList = this.memberPointList.concat(data.data);
								this.pageIndex++;
							}
						}
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.member-point .account-box {
	background: linear-gradient(#ff0036, rgba(255, 0, 54, 0.7)) !important;
}
.padding-bottom {
	padding-bottom: 68rpx !important;
}
.account-box {
	border-top: 2rpx solid;
	padding: 90rpx 0 30rpx;
	text-align: center;
}

.account-box .balance {
	font-size: 84rpx;
	color: #fff;
}

.declaration-title {
	background-color: #fff;
	border-bottom: 2rpx solid;
}

.empty {
	text-align: center;
}

.table-wrap-title {
	display: flex;
	justify-content: space-between;
}

.p-style {
	color: #fff;
}
.ns-table {
	background-color: #fff;
	.ns-table-wrap {
		border-bottom: 2rpx solid;
		padding: $ns-padding 0;
	}
}

.pull-right {
	margin-right: 40rpx;
	font-size: 40rpx;
}
</style>
